<template>
  <div class="app-container rule overflow-y-s">
    <!-- 筛选部分 -->
    <div class="toolbar-search">
      <el-form ref="searchParams" :model="searchParams" :inline="true" size="mini" @keyup.enter.native="handleSearch">
        <el-form-item label="状态:" prop="status">
          <el-select v-model="searchParams.status" placeholder="选择可用状态" clearable>
            <el-option :key="0" label="停用" :value="0" />
            <el-option :key="1" label="正常" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字:" prop="keyword">
          <el-input v-model="searchParams.keyword" placeholder="ID/分组名称" style="width: 180px" />
        </el-form-item>
        <div class="form-button">
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="handleSearch">筛选</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="handleSearch('searchParams', 'reset')">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 表格部分 -->
    <div v-loading="$store.state.app.loading" class="table-main fixed">
      <div class="table-top-button">
        <el-button icon="el-icon-plus" type="primary" size="mini" @click="handleOpenModal(null)">新增</el-button>
      </div>
      <el-table
        row-key="group_id"
        highlight-current-row
        :data="listData"
        :border="true"
        :stripe="true"
        :empty-text="$store.state.app.loading ? '正在加载数据' : null"
      >
        <el-table-column prop="group_id" label="ID" width="70" />
        <el-table-column prop="group_name" label="分组名称" width="150" />
        <el-table-column prop="description" label="分组描述" />
        <el-table-column prop="status" label="当前状态" width="80">
          <template slot-scope="item">
            <el-tag v-if="item.row.status === 1" type="success" size="small">正常</el-tag>
            <el-tag v-else type="danger" size="small">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="160" />
        <el-table-column prop="action" label="操作" width="100">
          <template slot-scope="item">
            <div class="button-group">
              <el-button type="text" size="mini" @click="handleOpenModal(item.row, true)">编辑
              </el-button>
              <el-button type="text" size="mini" @click="handleRowDelete(item.row)">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <paginate :total="searchParams.total" :per-page="searchParams.per_page" :page="searchParams.page" @paginate-change="handleSearch" />
    </div>
    <!-- 数据编辑弹窗 -->
    <box-save
      v-if="showModal"
      :is-update="isUpdate"
      :item-data="itemData"
      :option="{ listData: listData, menuTree: menuTree }"
      @on-cancel-modal="acceptCancelModal"
    />
  </div>
</template>

<script>
import boxSave from './components/save'
import Paginate from '@/components/Paginate/index'
import { destroy, info, paginate } from '@/api/group'

export default {
  components: { Paginate, boxSave },
  data: function() {
    return {
      listData: [],
      menuTree: [],
      itemData: null,
      isUpdate: false,
      showModal: false,
      searchParams: {
        keyword: null,
        status: null,
        total: null,
        page: null,
        per_page: parseInt(process.env.VUE_APP_PER_PAGE)
      }
    }
  },
  mounted: function() {
    // 初始化方法
    this.initialize()
  },
  methods: {
    // 初始化数据列表
    initialize: function() {
      // 获取数据列表
      this.$store.commit('app/SET_LOADING', true)
      paginate(this.searchParams).then(res => {
        this.listData = res.data
        this.searchParams.total = parseInt(res['total'])
        this.searchParams.page = parseInt(res['current_page'])
        this.searchParams.per_page = parseInt(res['per_page'])
        this.$nextTick(function() {
          this.$store.commit('app/SET_LOADING', false)
        })
      })
    },
    // 根据条件筛选数据
    handleSearch: function(value, field) {
      // 重置表单数据
      if (field === 'reset') {
        this.searchParams.page = 1
        this.$refs[value].resetFields()
        // 页码参数变更
      } else if (field) {
        this.searchParams.page = 1
        this.searchParams[field] = value
      }
      this.initialize()
    },
    // 打开数据编辑窗口
    handleOpenModal: function(itemData, isUpdate = false) {
      this.itemData = itemData
      this.isUpdate = isUpdate
      this.$store.commit('app/SET_LOADING', true)
      info(itemData ? itemData['group_id'] : null, function(res) {
        this.menuTree = res[0]
        if (this.isUpdate) {
          this.itemData = res[1]
        }
        this.showModal = true
        this.$store.commit('app/SET_LOADING', false)
      }.bind(this))
    },
    // 关闭数据编辑窗口
    acceptCancelModal: function(refresh = false) {
      if (refresh === true) {
        this.initialize()
      }
      this.showModal = false
    },
    // 删除列表指定数据
    handleRowDelete: function(row) {
      this.$confirm('该操作将彻底删除该数据切无法恢复，确定要继续吗?', '提示', {
        distinguishCancelAndClose: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '请稍等...'
            destroy(row.group_id).then(function() {
              done()
              this.initialize()
              instance.confirmButtonLoading = false
              instance.confirmButtonText = '确定'
            }.bind(this)).catch(function() {
              instance.confirmButtonLoading = false
              instance.confirmButtonText = '确定'
            })
          } else {
            done()
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'
          }
        }
      })
    }
  }
}
</script>
